<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--店员修改-->
      <div class="common-form">配置编辑</div>
      <el-form-item
        label="绑定地区"
        prop="region_id"
        :rules="[{ required: true, message: '绑定不能为空' }]"
      >
        <el-cascader
          v-model="form.region_id"
          :options="regions"
          :props="{ value: 'id', label: 'name' }"
          clearable
        >
        </el-cascader>
      </el-form-item>
      <el-form-item
        label="配置名称"
        prop="name"
        :rules="[{ required: true, message: '配置名称不能为空' }]"
      >
        <el-input
          class="max-w460"
          v-model="form.name"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="配置分类"
        prop="name"
        :rules="[{ required: true, message: '配置分类不能为空' }]"
      >
        <el-select
          size="small"
          v-model="form.type"
          placeholder="请选择"
          @change="changeType"
        >
          <el-option
            v-for="(item, index) in category"
            :key="index"
            :label="item.value"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配置值" v-if="show_val.input_value">
        <el-input
          class="max-w460"
          v-model="form.value"
          placeholder="请输入配置值"
        ></el-input>
      </el-form-item>
      <el-form-item label="配置图片" v-if="show_val.input_image">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('image')"
            >选择图片</el-button
          >
          <div v-if="form.image != ''" class="img mt10">
            <img :src="form.image" width="100" height="100" />
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="配置链接" v-if="show_val.input_link">
        <el-input
          class="max-w460"
          v-model="form.link"
          placeholder="请输入链接"
        ></el-input>
      </el-form-item>
      <el-form-item label="配置内容" v-if="show_val.input_content">
        <el-input
          class="max-w460"
          type="textarea"
          v-model="form.content"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item label="配置排序">
        <el-input
          class="max-w460"
          v-model="form.sort_num"
          placeholder="请输入排序号"
        ></el-input>
      </el-form-item>
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="onSubmit"
          :loading="loading"
          >提交</el-button
        >
      </div>
    </el-form>
    <!--上传图片组件-->
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :type="type"
      @returnImgs="returnImgsFunc"
      >上传图片</Upload
    >
  </div>
</template>

<script>
import DicApi from "@/api/dic.js";
import IndexApi from "@/api/index.js";
import Upload from "@/components/file/Upload";
import { formatModel } from "@/utils/base.js";

export default {
  components: {
    /*上传组件*/
    Upload
  },
  data() {
    return {
      form: {
        id: "",
        image: "",
        name: "",
        type: "",
        link: "",
        content: "",
        value: "",
        sort_num: "",
        region_id: 0
      },
      show_val: {
        input_value: false,
        input_image: false,
        input_link: false,
        input_content: false
      },
      loading: false,
      /*是否上传图片*/
      isupload: false,
      category: [],
      regions: []
    };
  },
  created() {
    this.getRegionList();
    this.getCategory();
    if (this.$route.query.id != 0 && this.$route.query.id != undefined) {
      this.form.id = this.$route.query.id;
      this.getParams();
    }
  },

  methods: {
    getRegionList() {
      let self = this;
      let Params = {};
      IndexApi.getProxyRegionList(Params, true)
        .then(res => {
          self.regions = [];
          Object.keys(res.data.regions).forEach(key => {
            self.regions.push(res.data.regions[key]);
          });
        })
        .catch(error => {});
    },
    changeType(e) {
      var self = this;
      this.form.content = "";
      this.form.image = "";
      this.form.link = "";
      this.form.value = "";
      this.selectCategory(e);
    },
    selectCategory(value) {
      var self = this;
      if (this.category.length > 0) {
        this.category.forEach(function(item) {
          if (item.key == value) {
            self.show_val.input_value = item.input_value;
            self.show_val.input_image = item.input_image;
            self.show_val.input_link = item.input_link;
            self.show_val.input_content = item.input_content;
          }
        });
        console.log(self.show_val);
      }
    },
    getCategory() {
      let self = this;
      // 取到路由带过来的参数
      DicApi.category({}, true)
        .then(data => {
          // 将数据放在当前组件的数据内
          self.category = data.data;
        })
        .catch(error => {});
    },
    getParams() {
      let self = this;
      // 取到路由带过来的参数
      DicApi.edit(
        {
          id: self.form.id
        },
        true
      )
        .then(data => {
          // 将数据放在当前组件的数据内
          self.form = formatModel(self.form, data.data.model);
          self.selectCategory(self.form.type);
          self.form.region_id = [
            data.data.model.province_id,
            data.data.model.city_id,
            data.data.model.county_id
          ];
        })
        .catch(error => {});
    },
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          if (this.form.id == "") {
            DicApi.create(form, true)
              .then(data => {
                self.$message({
                  message: "操作成功",
                  type: "success"
                });
                self.$router.push("/setting/dic/index");
              })
              .catch(error => {
                self.loading = false;
              });
          } else {
            DicApi.update(form, true)
              .then(data => {
                self.$message({
                  message: "操作成功",
                  type: "success"
                });
                self.$router.push("/setting/dic/index");
              })
              .catch(error => {
                self.loading = false;
              });
          }
        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == "image") {
          this.form.image = e[0].file_path;
        }
      }
      this.isupload = false;
    },
    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}
</style>
